<template>
  <div>
    <div class="qup-page-heade bread-box">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item class="btn-green" @click.native="goBack">渠道任务跟进</el-breadcrumb-item>
        <el-breadcrumb-item>详情</el-breadcrumb-item>
      </el-breadcrumb>
      <div>
        <el-button size="mini" @click.native="goBack">返回</el-button>
      </div>
    </div>
    <div v-loading="dataLoading">

      <div class="qup-title-box"><span class="border" /><span>任务基本信息</span></div>
      <el-form
        ref="refForm"
        style="margin-top:20px"
        :model="formData1"
        size="mini"
        label-width="150px"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="办事处:" prop="officeCode">
              {{ formData1.officeName }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户经理:" prop="customerManagerName">
              {{ formData1.customerManagerName }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系方式:" prop="customerManagerPhone">
              {{ formData1.customerManagerPhone }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="是否延续上月市场:" prop="isContinueLastMonthMarket">
              {{ formData1.isContinueLastMonthMarket===1?'是':'否' }}
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="责任市场:" prop="dutyMarket">
              {{ formData1.dutyMarket }}

            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="门店:" prop="shopCode">
              {{ formData1.shopName }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="报图类型:" prop="reportPicType">
              <el-select
                v-model="formData1.reportPicType"
                placeholder="请选择"
                style="width: 100%"
                disabled
              >
                <el-option
                  v-for="item in reportPicZone"
                  :key="item.dictCode"
                  :label="item.dictName"
                  :value="item.dictCode"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="任务类型:" prop="taskType">
              <el-select
                v-model="formData1.taskType"
                disabled
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in taskTypeList"
                  :key="item.dictCode"
                  :label="item.dictName"
                  :value="item.dictCode"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="任务来源说明:" prop="taskSourceDesc">
              <el-input v-model="formData1.taskSourceDesc" disabled maxlength="1000" show-word-limit type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="qup-title-box"><span class="border" /><span>客户经理每日填报</span></div>
      <el-form
        ref="refForm"
        style="margin-top:20px"
        :rules="formRules2"
        :model="formData2"
        size="mini"
        label-width="150px"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="当前是否有进展:" prop="isHaveProgress">
              {{ formData2.isHaveProgress?'有':'无' }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="整体进度:" prop="schedule">
              <el-select
                v-model="formData2.schedule"
                placeholder="请选择"
                disabled
                style="width: 100%"
              >
                <el-option
                  v-for="item in scheduleList"
                  :key="item.dictCode"
                  :label="item.dictName"
                  :value="item.dictCode"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table
        :header-cell-style="{background:'#F6F6F6', borderRight:'1px solid #EBEEF5'}"
        show-overflow-tooltip
        border
        style="width: 100%;margin:10px 0"
        :data="tableData"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="index" fixed width="50" label="序号" />
        <el-table-column show-overflow-tooltip prop="fillTime" fixed label="日期" />
        <el-table-column show-overflow-tooltip prop="isHaveProgress" width="100" label="是否有进展">
          <template slot-scope="scope">{{ scope.row.isHaveProgress===1?'是':'否' }}</template>
        </el-table-column>
        <el-table-column width="100" show-overflow-tooltip prop="haveIntentionDealer" label="有无意向商家">
          <template slot-scope="scope">{{ scope.row.haveIntentionDealer===1?'有':'无' }}</template>
        </el-table-column>

        <el-table-column width="100" show-overflow-tooltip prop="mapReportRate" label="本月希望报图率">
          <template slot-scope="scope">{{ scope.row.mapReportRate? (scope.row.mapReportRate==='A'?'高':'低') :'' }}</template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="negotiationSituationDetailed" label="洽谈情况详细描述" />
        <el-table-column show-overflow-tooltip prop="planSurveyTime" label="计划测绘日期" />
        <el-table-column show-overflow-tooltip prop="planReportPicTime" label="计划报图日期" />
      </el-table>
      <div class="qup-title-box"><span class="border" /><span>档案科填写资料</span></div>
      <el-form
        ref="refForm"
        style="margin-top:20px"
        :rules="formRules3"
        :model="formData3"
        size="mini"
        label-width="130px"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="是否完成分解任务:" prop="isFinishResolve">
              {{ formData3.isFinishResolve?'是':'否' }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="本月实际测绘数:" prop="thisMonthActualSurveyTime">
              {{ formData3.thisMonthActualSurveyTime }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="本月测绘项目号:" prop="thisMonthSurveyConstCode">
              {{ formData3.thisMonthSurveyConstCode }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="实际测绘与任务市场是否一致:" prop="isSurveyAndMarketConsisten">
              {{ formData3.isSurveyAndMarketConsisten?'是':'否' }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否核算本月任务:" prop="isAccountingThisMonth">
              {{ formData3.isAccountingThisMonth?'是':'否' }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注:" prop="remark">
              <el-input v-model="formData3.remark" disabled show-word-limit maxlength="1000" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table
        :header-cell-style="{background:'#F6F6F6', borderRight:'1px solid #EBEEF5'}"
        show-overflow-tooltip
        border
        style="width: 100%;margin:10px 0"
        :data="constTableData"
      >
        <el-table-column type="index" fixed width="50" label="序号" />
        <el-table-column show-overflow-tooltip prop="fillTime" fixed label="门店建设项目号" />
        <el-table-column show-overflow-tooltip prop="isHaveProgress" label="市场名称" />
        <el-table-column show-overflow-tooltip prop="haveIntentionDealer" label="门店编码" />
        <el-table-column show-overflow-tooltip prop="negotiationSituationDetailed" label="门店建设整体进度" />
        <el-table-column show-overflow-tooltip prop="planSurveyTime" label="所属阶段" />
        <el-table-column show-overflow-tooltip prop="planReportPicTime" label="测绘时间" />
        <el-table-column show-overflow-tooltip prop="planReportPicTime" label="报图时间" />
        <el-table-column show-overflow-tooltip prop="planReportPicTime" label="创建时间" />
      </el-table>
      <div style="color:#888;text-align:center">没有更多了</div>
    </div>
  </div>
</template>
<script>
import { getDictByPatchType } from '@/api/dataDict'
import { } from '@/api/common.js'
import { queryById, queryDailyFill } from '@/api/channelTask'
import BackPageMixin from '@/mixins/backPage'
export default {
  name: 'DetailChannelTask',
  components: { },
  mixins: [BackPageMixin],
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dataLoading: false,
      saveLoading: false,
      showDlgData: false,
      tableData: [],
      constTableData: [], // 门店建设

      scheduleList: [],
      reportPicZone: [], // 报图类型
      taskTypeList: [], // 任务类型
      formData1: {
        id: '',
        channelTaskCode: '',
        officeCode: '',
        officeName: '',
        customerManagerName: '',
        customerManagerPhone: '',
        isContinueLastMonthMarket: undefined,
        dutyMarket: '',
        shopCode: '',
        shopName: '',
        reportPicType: '',
        taskType: '',
        taskSourceDesc: ''
      },
      formData2: {
        schedule: '',
        isHaveProgress: undefined
      },
      formData3: {
        isFinishResolve: undefined,
        thisMonthActualSurveyTime: '',
        thisMonthSurveyConstCode: '',
        isSurveyAndMarketConsisten: undefined,
        isAccountingThisMonth: undefined,
        remark: ''
      },
      formData: {

      }

    }
  },
  watch: {
  },
  async created() {
    if (this.id) {
      this.dataLoading = true
      await queryById(this.id).then(res => {
        if (res.success === 1) {
          this.channelTaskCode = res.data.channelTaskCode
          // 获取详情数据
          const { id, channelTaskCode, officeCode, taskSourceDesc, officeName, customerManagerName, customerManagerPhone, isContinueLastMonthMarket, dutyMarket, shopCode, shopName, reportPicType, taskType } = res.data
          this.formData1 = { id, channelTaskCode, officeCode, taskSourceDesc, officeName, customerManagerName, customerManagerPhone, isContinueLastMonthMarket, dutyMarket, shopCode, shopName, reportPicType, taskType }
          this.office = [{ code: this.formData1.officeCode, name: this.formData1.officeName }]
          this.client = [{ userName: this.formData1.customerManagerName, account: this.formData1.customerManagerCode }]
          this.customer = [{ name: this.formData1.dutyMarket, code: this.formData1.dutyMarket }]
          this.shop = [{ name: this.formData1.shopName, code: this.formData1.shopCode }]

          const { schedule, isHaveProgress } = res.data
          this.formData2 = { schedule, isHaveProgress }
          const { isFinishResolve, thisMonthActualSurveyTime, thisMonthSurveyConstCode, isSurveyAndMarketConsisten, isAccountingThisMonth, remark } = res.data
          this.formData3 = { isFinishResolve, thisMonthActualSurveyTime, thisMonthSurveyConstCode, isSurveyAndMarketConsisten, isAccountingThisMonth, remark }
          this.dataLoading = false
        }
      }).catch(() => {
        this.dataLoading = false
      })
      if (this.channelTaskCode) {
        await queryDailyFill(this.channelTaskCode).then(res => {
          if (res.success) this.tableData = res.data.records
        })
      }
    }
    this.getDictByPatchTypeAll()
  },
  methods: {
    async getDictByPatchTypeAll() {
      const { OVERALL_PROGRESS, REPORT_TYPE, CHANNEL_TASK_TYPE } =
       await getDictByPatchType(['OVERALL_PROGRESS', 'REPORT_TYPE', 'CHANNEL_TASK_TYPE'])
      this.scheduleList = OVERALL_PROGRESS
      this.reportPicZone = REPORT_TYPE
      this.taskTypeList = CHANNEL_TASK_TYPE
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/ .el-breadcrumb__inner{
    color: $qup-color-primary;
  }

</style>
